import userPopover from "@/dynamicComponents/userPopover/userPopover.module.less"

interface Userinfo {
    avatar: string,
    nickname: string,
    sex: string,
    integral: number,
    introduction: string,
    friendApplyCount: number,
    attentionCount: number,
    replyCount: number
}

export default {
    props: {
        userinfo: Object,
    },
    setup(props: { userinfo: Userinfo }) {
        const content = (
            <div class={userPopover.userPopover_main}>
                <div class={userPopover.userPopover_body}>
                    <img src={props.userinfo.avatar} alt={"头像"} class={userPopover.userPopover_main_img}/>
                    <div>
                        <div class={userPopover.userPopover_main_item}>
                            <div class={userPopover.userPopover_main_item_one}>昵称：</div>
                            {props.userinfo.nickname}
                        </div>
                        <div class={userPopover.userPopover_main_item}>
                            <div class={userPopover.userPopover_main_item_one}>性别：</div>
                            {props.userinfo?.sex === '0' ? '男' : '女'}
                        </div>
                        <div class={userPopover.userPopover_main_item}>
                            <div class={userPopover.userPopover_main_item_one}>积分：</div>
                            {props.userinfo?.integral}
                        </div>
                        <div class={userPopover.userPopover_main_item}>
                            <div class={userPopover.userPopover_main_item_one}>粉丝数：</div>
                            {props.userinfo?.friendApplyCount}
                        </div>
                        <div class={userPopover.userPopover_main_item}>
                            <div class={userPopover.userPopover_main_item_one}>关注数：</div>
                            {props.userinfo?.attentionCount}
                        </div>
                        <div class={userPopover.userPopover_main_item}>
                            <div class={userPopover.userPopover_main_item_one}>回答数：</div>
                            {props.userinfo?.replyCount}
                        </div>
                    </div>
                </div>
                <div class={userPopover.userPopover_main_introduction}>
                    {props.userinfo.introduction === null ? '简介：空空如也' : <>简介：{props.userinfo.introduction}</>}
                </div>
            </div>
        );
        const location = 'right'

        return () => (
            //<></>：Fragments的简写
            <>
                <div>
                    <a-popover placement={location} content={content}>
                        <img src={props.userinfo.avatar} alt={"头像"} class={userPopover.user_img}/>
                    </a-popover>
                </div>
            </>
        )
    }
}